import React from 'react';
import { Form, Input, Button, Card } from 'antd';
import { ArrowRightOutlined } from '@ant-design/icons';
import { connect } from 'umi';
import './index.less';

// @connect必须写在class的上面
@connect(({ global, loading }) => ({ global, loading }))
export default class Login extends React.Component {
  /**
   * 登录系统获取token
   * @param {*} values 表单键值对
   */
  onFinish = async (values) => {
    //请求全局model
    this.props.dispatch({
      type: 'global/login', //全局namespace/全局effects方法名
      payload: values, //payload，参数
    });
  };
  /**
   * 表单未填写完成
   * @param {*} errorInfo
   */
  onFinishFailed = (errorInfo) => {
    console.log(this);
    console.log('Failed:', errorInfo);
  };
  render() {
    const { global = false } = this.props.loading;
    return (
      <div className="site-card-border-less-wrapper">
        <Card
          title={
            <div>
              <ArrowRightOutlined /> 登录系统{' '}
            </div>
          }
          bordered={true}
          style={{ width: 360 }}
        >
          <Form
            name="basic"
            initialValues={{ remember: true }}
            onFinish={this.onFinish}
            onFinishFailed={this.onFinishFailed}
          >
            <Form.Item
              label="账号"
              name="userName"
              rules={[{ required: true, message: '请输入的你账号!' }]}
            >
              <Input />
            </Form.Item>
            <Form.Item
              label="密码"
              name="userPassword"
              rules={[{ required: true, message: '请输入你的密码!' }]}
            >
              <Input.Password />
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" block loading={global}>
                点击登录
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    );
  }
}
// export default connect(({ system, global: { name } }) => ({ system, global }))(Login);
